<template>
  <div>
    <div class="box">
      <div class="cake_option">
        <div>
          <span class="classify">分类</span>
          <router-link :to="{ path: '/cake', query: { soke: '分类' } }" >
            <span>全部</span>
          </router-link>
          <span class="option_1">|</span>
          <router-link :to="{ path: '/cake', query: { soke: item } }" v-for="(item, index) in classify " :key="index">
            <span>{{ item }}</span>
          </router-link>
        </div>
        <div>
          <span class="classify">口味</span>
          <router-link :to="{ path: '/cake', query: { soke: '口味' } }">
            <span>全部</span>
          </router-link>
          <span class="option_2">|</span>
          <router-link :to="{ path: '/cake', query: { soke: item } }" v-for="(item, index) in taste " :key="index">
            <span>{{ item }}</span>
          </router-link>
        </div>

        <div>
          <span class="classify">人群</span>
          <router-link :to="{ path: '/cake', query: { soke: '人群' } }">
            <span>全部</span>
          </router-link>
          <span class="option_3">|</span>
          <router-link :to="{ path: '/cake', query: { soke: item } }" v-for="(item, index) in crowd " :key="index">
            <span>{{ item }}</span>
          </router-link>
        </div>
      </div>
  
      <div style=" width: 85%; margin: 2% auto 1%;">
        <div style=" font-size: 25px; color: #3C2314;text-align: left;">{{ this.$route.query.soke }}</div>


        <el_row v-if="list.length > 0">

          <el-col :span="6" v-for="(item, index ) in list" :key="index">
            <goods :goods="item"></goods>
          </el-col>
        </el_row>
        <div v-else>
          <el-empty description="无"></el-empty>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { getproduct } from '@/api';
import goods from '@/components/index/goods.vue';
export default {
  data () {
    return {
      classify: ['新品', '生日', '聚会', '下午茶', '婚礼', '送全国'],
      taste: ['巧克力', '芝士', '慕斯', '冰激凌', '含酒', '坚果', '奶油', '水果', '咖啡'],
      crowd: ['老人', '儿童', '孕妇', '情侣'],
      dataList: []
    }
  },
  computed: {
    list () {
      return this.dataList.filter(item => {
        return item.product_sort === this.$route.query.soke
      })
    }
  },
  methods: {

  },
  components: {
    goods
  },
  mounted () {
    getproduct().then(res => {
      this.dataList = res.data.data;

    });
  },
}
</script>

<style scoped>
.cake_option {
  height: 144px;
  padding-top: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e7e7e7;
  width: 80%;
  margin: 2% auto 1%;
  font-size: 24px;
}

.cake_option>div {
  width: 100%;
  height: 48px;
  line-height: 48px;
  font-size: 14px;
}
::v-deep .router-link-exact-active{
  color: #C8B49B;
}
.cake_option a {
  text-decoration: none;
}

.classify {
  margin-right: 60px;
  color: #aaa;
  /* font-size: 17px; */
}

a:visited {
  color: #3C2314;
  margin-right: 35px;
  /* font-size: 17px; */
}

a:link {
  color: #3C2314;
  margin-right: 35px;
  /* font-size: 17px; */
}

.option_1,
.option_2,
.option_3,
.option_ {
  margin-right: 35px;
}

.option_click_1,
.option_click_2,
.option_click_3 {
  color: #C8B49B !important;
}

.option_1,
.option_2,
.option_3 {
  color: #3C2314;
}

a:hover {
  color: #C8B49B;
}
</style>